import Vue from 'vue'
import Vuex from 'vuex'
import { cartGet, cartPath } from '@/api/index.js'
Vue.use(Vuex)
/*
数量 修改
1：定义api
2:定义actions
3:在actions中调用api进行数据是个
4：修改vuex中相应项的count的值
5：通过点击+、-按钮来调用actions
*/

export default new Vuex.Store({
  state: {
    list: [] // 存储所有的数据
    // 使用 this.$store.state.list
  },
  getters: {
    // 依赖state数据产生一个新的值
    total (state) {
      const num = state.list.reduce((prev, item) => {
        return prev + item.count
      }, 0)
      return num
    },
    // 访问： this.$store.getters.total
    // 总价
    totalPrice (state) {
      return state.list.reduce((prev, item) => {
        return prev + item.count * item.price
      }, 0)
    }
  },
  mutations: {
    // 修改list数据
    setList (state, value) {
      state.list = value
    },
    // 用于修改count
    setCount (state, value) {
      // 找出对应的id项
      const findItem = state.list.find(item => item.id === value.id)
      // 修改相应项的count值
      findItem.count = value.count
    }
  },
  actions: {
    // 调用接口获取数据（调用接口是异步处理）
    // 封装抽离了，后面其它地方要用，直接调用就可以了
    async getList (ctx) {
      // xtc固定参数  {state,commit}
      // 调用axios获取数据
      const res = await cartGet()
      // 列表存储
      ctx.commit('setList', res)
      console.log(res)
    },
    // 调用：vue  this.$store.dispatch('方法名',有实参就传入实参)
    // 修改数量
    async apiSetCount (ctx, obj) {
      // 接口调用：接口数据已更改
      await cartPath(obj)
      // list数据的修改
      ctx.commit('setCount', obj)
    }
  },
  modules: {}
})
